<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Loading Demo</title>
  <style>
    body {
      margin: 0 auto;
      padding: 20px;
      max-width: 1200px;
      overflow-y: scroll;
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      color: #777;
      background-color: #f7f7f7;
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%
    }

    .content {
      padding: 15px;
      overflow: hidden;
      background-color: #e7e7e7;
      background-color: rgba(0, 0, 0, .06)
    }

    h1 {
      padding-bottom: 15px;
      border-bottom: 1px solid #d8d8d8;
      font-weight: 600
    }

    h1 span {
      font-family: monospace, serif
    }

    h3 {
      padding-bottom: 20px;
      box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 2px 0 rgba(255, 255, 255, .9)
    }

    p {
      margin: .5em 0;
      padding: 10px 0;
      color: #777
    }

    .clear {
      clear: both
    }

    .wrapp {
      float: left;
      width: 100px;
      height: 100px;
      margin: 0 10px 10px 0;
      padding: 20px 20px 20px;
      border-radius: 5px;
      text-align: center;
      background-color: #d8d8d8
    }

    .wrapp p {
      padding: 0 0 20px
    }

    .wrapp:last-child {
      margin-right: 0
    }

    .k-line {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 15px;
      background-color: #4b9cdb
    }

    .k-line2 {
      display: inline-block;
      background: #666;
      height: 10px;
      width: 10px;
      opacity: 0;
      border-radius: 50%;
      transform: translateX(-300px);
      background-color: #4b9cdb
    }

    .k-ring-1 {
      width: 10px;
      height: 10px;
      margin: 0 auto;
      padding: 10px;
      border: 7px dashed #000;
      border-radius: 100%
    }

    .k-ring-2 {
      position: relative;
      width: 45px;
      height: 45px;
      margin: 0 auto;
      border: 4px solid #9C27B0;
      border-radius: 100%
    }

    .k-ball-holder {
      position: absolute;
      width: 12px;
      height: 45px;
      left: 17px;
      top: 0
    }

    .k-ball-holder2 {
      position: absolute;
      width: 12px;
      height: 45px;
      left: 17px;
      top: 0
    }

    .k-ball-holder3 {
      margin-left: 25%
    }

    .k-square-holder {
      margin-top: 15px
    }

    .k-square-holder2 {
      margin-left: 25%;
      width: 50px
    }

    .k-ball1a {
      position: absolute;
      top: -10px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #F44336
    }

    .k-ball1b {
      position: absolute;
      top: -10px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #000
    }

    .k-ball1c {
      position: absolute;
      top: -10px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #C51162
    }

    .k-ball1d {
      position: absolute;
      top: -10px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #CDDC39
    }

    .k-ball1e {
      position: absolute;
      top: -10px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #CDDC39
    }

    .k-ball2a {
      position: absolute;
      bottom: -10px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #000
    }

    .k-ball2b {
      position: absolute;
      bottom: -10px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #F44336
    }

    .k-ball2c {
      position: absolute;
      bottom: -10px;
      left: -1px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #F44336
    }

    .k-ball3 {
      position: absolute;
      bottom: -4px;
      right: -19px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #A0F
    }

    .k-ball4 {
      position: absolute;
      bottom: 8px;
      left: -25px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #6200EA
    }

    .k-ball5a {
      position: absolute;
      top: 14px;
      left: -26px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #4CAF50
    }

    .k-ball5b {
      position: absolute;
      top: 14px;
      left: -26px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #4CAF50
    }

    .k-ball6a {
      position: absolute;
      top: 14px;
      right: -26px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #3F51B5
    }

    .k-ball6b {
      position: absolute;
      top: 14px;
      right: -26px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #3F51B5
    }

    .k-ball7a {
      border: 0;
      margin: 0;
      width: 16px;
      height: 16px;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
      background: #19A68C;
      animation-delay: -1.5s
    }

    .k-ball7b {
      border: 0;
      margin: 0;
      width: 16px;
      height: 16px;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
      background: #F63D3A;
      animation-delay: -1s
    }

    .k-ball7c {
      border: 0;
      margin: 0;
      width: 16px;
      height: 16px;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
      background: #FDA543;
      animation-delay: -0.5s
    }

    .k-ball7d {
      border: 0;
      margin: 0;
      width: 16px;
      height: 16px;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
      background: #193B48
    }

    .k-letter-holder {
      padding: 16px
    }

    .k-letter {
      float: left;
      font-size: 14px;
      color: #777
    }

    .k-square {
      width: 12px;
      height: 12px;
      border-radius: 4px;
      background-color: #4b9cdb
    }

    .k-square2 {
      float: right;
      top: -15px;
      width: 12px;
      height: 12px;
      border-radius: 4px;
      background-color: #4b9cdb
    }

    .k-square3 {
      display: inline-block;
      width: 15px;
      height: 15px;
      background: #000;
      opacity: .2;
      animation: k-loadingQ 2s infinite;
      opacity: .5
    }

    .k-square4 {
      display: inline-block;
      width: 15px;
      height: 15px;
      background: #000;
      opacity: 1;
      animation: k-loadingR 2.8s infinite;
      opacity: 0
    }

    .k-spinner {
      position: relative;
      width: 45px;
      height: 45px;
      margin: 0 auto
    }

    .k-bubble-1,
    .k-bubble-2 {
      position: absolute;
      top: 0;
      width: 25px;
      height: 25px;
      border-radius: 100%;
      background-color: #4b9cdb
    }

    .k-bubble-2 {
      top: auto;
      bottom: 0
    }

    .k-bar {
      float: left;
      width: 15px;
      height: 6px;
      border-radius: 2px;
      background-color: #4b9cdb
    }

    .k-line1-1 {
      animation: k-loadingA 1.5s 0s infinite
    }

    .k-line1-2 {
      animation: k-loadingA 1.5s .5s infinite
    }

    .k-line1-3 {
      animation: k-loadingA 1.5s 1s infinite
    }

    .k-line2-1 {
      animation: k-loadingA 1.5s 1s infinite;
      background-color: #F44336
    }

    .k-line2-2 {
      animation: k-loadingA 1.5s .5s infinite;
      background-color: #E91E63
    }

    .k-line2-3 {
      animation: k-loadingA 1.5s 0s infinite;
      background-color: #9C27B0
    }

    .k-line3-1 {
      animation: k-loadingA 1.5s 0s infinite;
      background-color: #1E88E5
    }

    .k-line3-2 {
      animation: k-loadingA 1.5s .1s infinite;
      background-color: #2196F3
    }

    .k-line3-3 {
      animation: k-loadingA 1.5s .2s infinite;
      background-color: #42A5F5
    }

    .k-line3-4 {
      animation: k-loadingA 1.5s .3s infinite;
      background-color: #64B5F6
    }

    .k-line3-5 {
      animation: k-loadingA 1.5s .4s infinite;
      background-color: #90CAF9
    }

    .k-line4-1 {
      animation: k-loadingA 1.5s .1s infinite;
      background-color: #81C784
    }

    .k-line4-2 {
      animation: k-loadingA 1.5s .2s infinite;
      background-color: #66BB6A
    }

    .k-line4-3 {
      animation: k-loadingA 1.5s .4s infinite;
      background-color: #4CAF50
    }

    .k-line4-4 {
      animation: k-loadingA 1.5s .8s infinite;
      background-color: #43A047
    }

    .k-line4-5 {
      animation: k-loadingA 1.5s 1.2s infinite;
      background-color: #388E3C
    }

    .k-line5-1 {
      animation: k-loadingB 1.5s 0s infinite;
      background-color: #F44336
    }

    .k-line5-2 {
      animation: k-loadingB 1.5s .5s infinite;
      background-color: #F44336
    }

    .k-line5-3 {
      animation: k-loadingB 1.5s 1s infinite;
      background-color: #F44336
    }

    .k-line6-1 {
      animation: k-loadingB 1.5s 0s infinite;
      background-color: #FF5722
    }

    .k-line6-2 {
      animation: k-loadingB 1.5s .1s infinite;
      background-color: #FF5722
    }

    .k-line6-3 {
      animation: k-loadingB 1.5s .2s infinite;
      background-color: #FF5722
    }

    .k-line6-4 {
      animation: k-loadingB 1.5s .3s infinite;
      background-color: #FF5722
    }

    .k-line6-5 {
      animation: k-loadingB 1.5s .4s infinite;
      background-color: #FF5722
    }

    .k-line6b-1 {
      animation: k-loadingB 1.5s .1s infinite;
      background-color: #009688
    }

    .k-line6b-2 {
      animation: k-loadingB 1.5s .2s infinite;
      background-color: #009688
    }

    .k-line6b-3 {
      animation: k-loadingB 1.5s .4s infinite;
      background-color: #009688
    }

    .k-line6b-4 {
      animation: k-loadingB 1.5s .8s infinite;
      background-color: #009688
    }

    .k-line6b-5 {
      animation: k-loadingB 1.5s 1.2s infinite;
      background-color: #009688
    }

    .k-line7-1 {
      animation: k-loadingC .6s .1s linear infinite;
      background-color: #827717
    }

    .k-line7-2 {
      animation: k-loadingC .6s .2s linear infinite;
      background-color: #827717
    }

    .k-line7-3 {
      animation: k-loadingC .6s .3s linear infinite;
      background-color: #827717
    }

    .k-line8-1 {
      animation: k-loadingC .6s .3s linear infinite;
      background-color: #3F51B5
    }

    .k-line8-2 {
      animation: k-loadingC .6s .2s linear infinite;
      background-color: #3F51B5
    }

    .k-line8-3 {
      animation: k-loadingC .6s .1s linear infinite;
      background-color: #3F51B5
    }

    .k-line9-1 {
      animation: k-loadingC .6s .4s linear infinite;
      background-color: #FF5722
    }

    .k-line9-2 {
      animation: k-loadingC .6s .3s linear infinite;
      background-color: #F4511E
    }

    .k-line9-3 {
      animation: k-loadingC .6s .2s linear infinite;
      background-color: #E64A19
    }

    .k-line9-4 {
      animation: k-loadingC .6s .1s linear infinite;
      background-color: #D84315
    }

    .k-line9b-1 {
      animation: k-loadingC .6s .4s linear infinite;
      background-color: #BDBDBD
    }

    .k-line9b-2 {
      animation: k-loadingC .6s .3s linear infinite;
      background-color: #9E9E9E
    }

    .k-line9b-3 {
      animation: k-loadingC .6s .2s linear infinite;
      background-color: #757575
    }

    .k-line9b-4 {
      animation: k-loadingC .6s .1s linear infinite;
      background-color: #616161
    }

    .k-line9b-5 {
      animation: k-loadingC .6s .0s linear infinite;
      background-color: #424242
    }

    .k-line11-1 {
      animation: k-loadingP 2s infinite
    }

    .k-line11-2 {
      animation: k-loadingP 2s infinite;
      animation-delay: .15s
    }

    .k-line11-3 {
      animation: k-loadingP 2s infinite;
      animation-delay: .30s
    }

    .k-line11-4 {
      animation: k-loadingP 2s infinite;
      animation-delay: .45s
    }

    .k-line11-5 {
      animation: k-loadingP 2s infinite;
      animation-delay: .60s
    }

    .k-line12-1 {
      animation: k-loadingS 4s infinite;
      animation-delay: .8s
    }

    .k-line12-2 {
      animation: k-loadingS 4s infinite;
      animation-delay: .7s
    }

    .k-line12-3 {
      animation: k-loadingS 4s infinite;
      animation-delay: .6s
    }

    .k-line12-4 {
      animation: k-loadingS 4s infinite;
      animation-delay: .5s
    }

    .k-line12-5 {
      animation: k-loadingS 4s infinite;
      animation-delay: .4s
    }

    .k-line12-6 {
      animation: k-loadingS 4s infinite;
      animation-delay: .3s
    }

    .k-line12-7 {
      animation: k-loadingS 4s infinite;
      animation-delay: .2s
    }

    .k-line12-8 {
      animation: k-loadingS 4s infinite;
      animation-delay: .1s
    }

    .k-ring-1 {
      animation: k-loadingD 1.5s .3s cubic-bezier(.17, .37, .43, .67) infinite
    }

    .k-ball-holder {
      animation: k-loadingE 1.3s linear infinite
    }

    .k-ball-holder2 {
      animation: k-loadingE 2.3s linear infinite
    }

    .k-letter {
      animation-name: k-loadingF;
      animation-duration: 1.6s;
      animation-iteration-count: infinite;
      animation-direction: linear
    }

    .k-letter-1 {
      animation-delay: .48s
    }

    .k-letter-2 {
      animation-delay: .6s
    }

    .k-letter-3 {
      animation-delay: .72s
    }

    .k-letter-4 {
      animation-delay: .84s
    }

    .k-letter-5 {
      animation-delay: .96s
    }

    .k-letter-6 {
      animation-delay: 1.08s
    }

    .k-letter-7 {
      animation-delay: 1.2s
    }

    .k-letter-8 {
      animation-delay: 1.32s
    }

    .k-letter-9 {
      animation-delay: 1.44s
    }

    .k-letter-10 {
      animation-delay: 1.56s
    }

    .k-letter-1b {
      animation-delay: .48s;
      color: #F44336
    }

    .k-letter-2b {
      animation-delay: .6s;
      color: #3F51B5
    }

    .k-letter-3b {
      animation-delay: .72s;
      color: #009688
    }

    .k-letter-4b {
      animation-delay: .84s;
      color: #4CAF50
    }

    .k-letter-5b {
      animation-delay: .96s;
      color: #8BC34A
    }

    .k-letter-6b {
      animation-delay: 1.08s;
      color: #CDDC39
    }

    .k-letter-7b {
      animation-delay: 1.2s;
      color: #FF9800
    }

    .k-letter-8b {
      animation-delay: 1.32s;
      color: #FF5722
    }

    .k-letter-9b {
      animation-delay: 1.44s;
      color: #795548
    }

    .k-letter-10b {
      animation-delay: 1.56s;
      color: #607D8B
    }

    .k-square {
      animation: k-loadingG 1.5s cubic-bezier(.17, .37, .43, .67) infinite
    }

    .k-square2 {
      animation: k-loadingGb 1.5s cubic-bezier(.17, .37, .43, .67) infinite
    }

    .k-square3a {
      transform: translate(0, -25px)
    }

    .k-square3b {
      transform: translate(25px, 0)
    }

    .k-square3c {
      transform: translate(-25px, 0)
    }

    .k-square3d {
      transform: translate(0, 25px)
    }

    .k-square4b {
      animation-delay: .7s
    }

    .k-square4c {
      animation-delay: 2.1s
    }

    .k-square4d {
      animation-delay: 1.4s
    }

    .k-line10 {
      animation: k-loadingH 1.5s cubic-bezier(.17, .37, .43, .67) infinite;
      background-color: #00BCD4
    }

    .k-line10b {
      animation: k-loadingHb 1.5s cubic-bezier(.17, .37, .43, .67) infinite
    }

    .k-spinner {
      animation: k-loadingI 2s linear infinite
    }

    .k-bubble-1,
    .k-bubble-2 {
      animation: k-loadingIb 2s ease-in-out infinite;
      background-color: #FFC107
    }

    .k-bubble-2 {
      animation-delay: -1.0s
    }

    .k-bar {
      animation: k-loadingJ 2s cubic-bezier(.17, .37, .43, .67) infinite
    }

    .k-loader {
      display: inline-block;
      font-size: 2em;
      margin: 0 .5em;
      position: relative;
      height: .5em;
      width: 1em
    }

    .k-loader:before,
    .k-loader:after {
      content: "";
      display: block;
      height: .5em;
      position: absolute;
      width: .5em
    }

    .k-loader:before {
      animation: k-loadingK 2s ease-in-out infinite, k-loadingM .66s ease-in-out infinite;
      background: #ee6362
    }

    .k-loader:after {
      animation: k-loadingL 2s ease-in-out infinite, k-loadingN .66s ease-in-out infinite;
      background: #2cb0b2
    }

    .k-small {
      font-size: 1em
    }

    .k-large {
      font-size: 4em
    }

    .k-circle:before,
    .k-circle:after {
      border-radius: 50%
    }

    .k-circle-before:before {
      border-radius: 50%
    }

    .k-circle-after:after {
      border-radius: 50%
    }

    @keyframes k-loadingA {
      0 {
        height: 15px
      }

      50% {
        height: 35px
      }

      100% {
        height: 15px
      }
    }

    @keyframes k-loadingB {
      0 {
        width: 15px
      }

      50% {
        width: 35px
      }

      100% {
        width: 15px
      }
    }

    @keyframes k-loadingC {
      0 {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(0, 15px)
      }

      100% {
        transform: translate(0, 0)
      }
    }

    @keyframes k-loadingD {
      0 {
        transform: rotate(0deg)
      }

      50% {
        transform: rotate(180deg)
      }

      100% {
        transform: rotate(360deg)
      }
    }

    @keyframes k-loadingE {
      0 {
        transform: rotate(0deg)
      }

      100% {
        transform: rotate(360deg)
      }
    }

    @keyframes k-loadingF {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1
      }
    }

    @keyframes k-loadingG {
      0% {
        transform: translate(0, 0) rotate(0deg)
      }

      50% {
        transform: translate(70px, 0) rotate(360deg)
      }

      100% {
        transform: translate(0, 0) rotate(0deg)
      }
    }

    @keyframes k-loadingGb {
      0% {
        transform: translate(0, 0) rotate(0deg)
      }

      50% {
        transform: translate(-70px, 0) rotate(-360deg)
      }

      100% {
        transform: translate(0, 0) rotate(0deg)
      }
    }

    @keyframes k-loadingH {
      0% {
        width: 15px
      }

      50% {
        width: 35px;
        padding: 4px
      }

      100% {
        width: 15px
      }
    }

    @keyframes k-loadingHb {
      0% {
        width: 15px;
        background-color: #607D8B
      }

      50% {
        width: 35px;
        padding: 4px;
        background-color: #455A64
      }

      100% {
        width: 15px;
        background-color: #263238
      }
    }

    @keyframes k-loadingI {
      100% {
        transform: rotate(360deg)
      }
    }

    @keyframes k-loadingIb {

      0%,
      100% {
        transform: scale(0)
      }

      50% {
        transform: scale(1)
      }
    }

    @keyframes k-loadingJ {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(80px, 0);
        background-color: #f5634a;
        width: 25px
      }
    }

    @keyframes k-loadingK {
      0% {
        left: 0;
        transform: scale(1.1)
      }

      50% {
        left: 100%;
        transform: scale(1)
      }

      100% {
        left: 0;
        transform: scale(1.1)
      }
    }

    @keyframes k-loadingL {
      0% {
        left: 100%;
        transform: scale(1.1)
      }

      50% {
        left: 0;
        transform: scale(1)
      }

      100% {
        left: 100%;
        transform: scale(1.1)
      }
    }

    @keyframes k-loadingM {
      0% {
        z-index: 0
      }

      50% {
        z-index: 1
      }

      100% {
        z-index: 0
      }
    }

    @keyframes k-loadingN {
      0% {
        z-index: 1
      }

      50% {
        z-index: 0
      }

      100% {
        z-index: 1
      }
    }

    @keyframes k-loadingO {

      0%,
      100% {
        transform: translate(0)
      }

      25% {
        transform: translate(160%)
      }

      50% {
        transform: translate(160%, 160%)
      }

      75% {
        transform: translate(0, 160%)
      }
    }

    @keyframes k-loadingP {
      0% {
        transform: translateY(0)
      }

      35% {
        transform: translateY(0);
        opacity: .3
      }

      50% {
        transform: translateY(-20px);
        opacity: .8
      }

      70% {
        transform: translateY(3px);
        opacity: .8
      }

      85% {
        transform: translateY(-3px)
      }
    }

    @keyframes k-loadingQ {
      33% {
        transform: translate(0, 0);
        opacity: .7
      }

      66% {
        transform: translate(0, 0);
        opacity: .7
      }
    }

    @keyframes k-loadingR {
      0% {
        opacity: .5;
        background: #000
      }

      30% {
        opacity: .5;
        background: #666
      }

      60% {
        opacity: 0
      }

      75% {
        opacity: 0
      }

      100% {
        opacity: .5;
        background: #000
      }
    }

    @keyframes k-loadingS {
      40% {
        transform: translateX(0);
        opacity: .8
      }

      100% {
        transform: translateX(300px);
        opacity: 0
      }
    }
  </style>
</head>

<body>
  <div class="content">
    <h3>CSS3 Spinner &amp; Loader animations</h3>
    <div class="wrapp">
      <div class="load-1">
        <p>Loader 1a</p>
        <div class="k-line k-line1-1"></div>
        <div class="k-line k-line1-2"></div>
        <div class="k-line k-line1-3"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-1">
        <p>Loader 1b</p>
        <div class="k-line k-line2-1"></div>
        <div class="k-line k-line2-2"></div>
        <div class="k-line k-line2-3"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-1">
        <p>Loader 1c</p>
        <div class="k-line k-line3-1"></div>
        <div class="k-line k-line3-2"></div>
        <div class="k-line k-line3-3"></div>
        <div class="k-line k-line3-4"></div>
        <div class="k-line k-line3-5"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-1">
        <p>Loader 1d</p>
        <div class="k-line k-line4-1"></div>
        <div class="k-line k-line4-2"></div>
        <div class="k-line k-line4-3"></div>
        <div class="k-line k-line4-4"></div>
        <div class="k-line k-line4-5 "></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-2">
        <p>Loader 2a</p>
        <div class="k-line k-line5-1"></div>
        <div class="k-line k-line5-2"></div>
        <div class="k-line k-line5-3"></div>
      </div>
    </div>
    <div class="wrapp" style="width:250px">
      <div class="load-2">
        <p>Loader 2b</p>
        <div class="k-line k-line6-1"></div>
        <div class="k-line k-line6-2"></div>
        <div class="k-line k-line6-3"></div>
        <div class="k-line k-line6-4"></div>
        <div class="k-line k-line6-5"></div>
      </div>
    </div>
    <div class="wrapp" style="width:250px">
      <div class="load-2">
        <p>Loader 2c</p>
        <div class="k-line k-line6b-1"></div>
        <div class="k-line k-line6b-2"></div>
        <div class="k-line k-line6b-3"></div>
        <div class="k-line k-line6b-4"></div>
        <div class="k-line k-line6b-5"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-3">
        <p>Loader 3a</p>
        <div class="k-line k-line7-1"></div>
        <div class="k-line k-line7-2"></div>
        <div class="k-line k-line7-3"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-3">
        <p>Loader 3b</p>
        <div class="k-line k-line8-1"></div>
        <div class="k-line k-line8-2"></div>
        <div class="k-line k-line8-3"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-3">
        <p>Loader 3c</p>
        <div class="k-line k-line9-1"></div>
        <div class="k-line k-line9-2"></div>
        <div class="k-line k-line9-3"></div>
        <div class="k-line k-line9-4"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-3">
        <p>Loader 3d</p>
        <div class="k-line k-line9b-1"></div>
        <div class="k-line k-line9b-2"></div>
        <div class="k-line k-line9b-3"></div>
        <div class="k-line k-line9b-4"></div>
        <div class="k-line k-line9b-5"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-3">
        <p>Loader 3e</p>
        <div class="k-line k-line11-1"></div>
        <div class="k-line k-line11-2"></div>
        <div class="k-line k-line11-3"></div>
        <div class="k-line k-line11-4"></div>
        <div class="k-line k-line11-5"></div>
      </div>
    </div>
    <div class="wrapp" style="width:700px">
      <div class="load-3">
        <p>Loader 3f</p>
        <div class="k-line2 k-line12-1"></div>
        <div class="k-line2 k-line12-2"></div>
        <div class="k-line2 k-line12-3"></div>
        <div class="k-line2 k-line12-4"></div>
        <div class="k-line2 k-line12-5"></div>
        <div class="k-line2 k-line12-6"></div>
        <div class="k-line2 k-line12-7"></div>
        <div class="k-line2 k-line12-8"></div>
      </div>
    </div>
    <div class="wrapp">
      <!-- Loader 4 don't work on firefox because of the border-radius and the "dashed" style. -->
      <div class="load-4">
        <p>Loader 4</p>
        <div class="k-ring-1"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-5">
        <p>Loader 5a</p>
        <div class="k-ring-2">
          <div class="k-ball-holder">
            <div class="k-ball1a"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-5">
        <p>Loader 5b</p>
        <div class="k-ring-2" style="border-color:#FFFFFF;">
          <div class="k-ball-holder">
            <div class="k-ball1b"></div>
            <div class="k-ball2a"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-5">
        <p>Loader 5c</p>
        <div class="k-ring-2" style="border-color:#3F51B5;">
          <div class="k-ball-holder2">
            <div class="k-ball1c"></div>
            <div class="k-ball3"></div>
            <div class="k-ball4"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-5">
        <p>Loader 5d</p>
        <div class="k-ring-2" style="border-color:#000000;">
          <div class="k-ball-holder2">
            <div class="k-ball1d"></div>
            <div class="k-ball2b"></div>
            <div class="k-ball5a"></div>
            <div class="k-ball6a"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-5">
        <p>Loader 5e</p>
        <div class="k-ring-2" style="border:hidden;">
          <div class="k-ball-holder2">
            <div class="k-ball1e"></div>
            <div class="k-ball2c"></div>
            <div class="k-ball5b"></div>
            <div class="k-ball6b"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-5">
        <p>Loader 5f</p>
        <div class="k-ball-holder3">
          <div class="k-ball7a"></div>
          <div class="k-ball7b"></div>
          <div class="k-ball7c"></div>
          <div class="k-ball7d"></div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-6">
        <p>Loader 6</p>
        <div class="k-letter-holder">
          <div class="k-letter-1 k-letter">L</div>
          <div class="k-letter-2 k-letter">o</div>
          <div class="k-letter-3 k-letter">a</div>
          <div class="k-letter-4 k-letter">d</div>
          <div class="k-letter-5 k-letter">i</div>
          <div class="k-letter-6 k-letter">n</div>
          <div class="k-letter-7 k-letter">g</div>
          <div class="k-letter-8 k-letter">.</div>
          <div class="k-letter-9 k-letter">.</div>
          <div class="k-letter-10 k-letter">.</div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-6">
        <p>Loader 6</p>
        <div class="k-letter-holder">
          <div class="k-letter-1b k-letter">L</div>
          <div class="k-letter-2b k-letter">o</div>
          <div class="k-letter-3b k-letter">a</div>
          <div class="k-letter-4b k-letter">d</div>
          <div class="k-letter-5b k-letter">i</div>
          <div class="k-letter-6b k-letter">n</div>
          <div class="k-letter-7b k-letter">g</div>
          <div class="k-letter-8b k-letter">.</div>
          <div class="k-letter-9b k-letter">.</div>
          <div class="k-letter-10b k-letter">.</div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-7">
        <p>Loader 7a</p>
        <div class="k-square-holder">
          <div class="k-square"></div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-7">
        <p>Loader 7b</p>
        <div class="k-square-holder">
          <div class="k-square"></div>
        </div>
        <div class="k-square-holder">
          <div class="k-square2"></div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-7">
        <p>Loader 7c</p>
        <div class="k-square-holder2">
          <div class="k-square3 k-square3a"></div>
          <div class="k-square3 k-square3b"></div>
          <div class="k-square3 k-square3c"></div>
          <div class="k-square3 k-square3d"></div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-7">
        <p>Loader 7d</p>
        <div class="k-square-holder2">
          <div class="k-square4 k-square4a"></div>
          <div class="k-square4 k-square4b"></div>
          <div class="k-square4 k-square4c"></div>
          <div class="k-square4 k-square4d"></div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-8">
        <p>Loader 8a</p>
        <div class="k-line k-line10"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-8">
        <p>Loader 8b</p>
        <div class="k-line k-line10b"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-9">
        <p>Loader 9</p>
        <div class="k-spinner">
          <div class="k-bubble-1"></div>
          <div class="k-bubble-2"></div>
        </div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-10">
        <p>Loader 10</p>
        <div class="k-bar"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-11">
        <p>Loader 11a</p>
        <div class="k-loader k-small"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-12">
        <p>Loader 11b</p>
        <div class="k-loader"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-13">
        <p>Loader 11c</p>
        <div class="k-loader k-circle-before"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-14">
        <p>Loader 11d</p>
        <div class="k-loader k-circle-after"></div>
      </div>
    </div>
    <div class="wrapp">
      <div class="load-15">
        <p>Loader 11e</p>
        <div class="k-loader k-circle"></div>
      </div>
    </div>
  </div>
</body>

</html>